<template>
  <div class="page msg-list" :style="{'min-height': winHeight + 'px'}">
    <div class="container scroll-container" :style="{'height': winHeight + 'px'}">
      <div v-if="show"
        v-infinite-scroll="loadMsgs"
        :infinite-scroll-disabled="loading"
        infinite-scroll-distance="30">
          <div class="rela-tip-main">
            <div class="rela-result-tip top-list-counter">总计{{ total }}条记录</div>
          </div>
          <div class="no-data-tip" v-if="!list.length && init">暂无通知</div>
          <div class="msg-list-box">
            <div class="msg-item" v-for="(item, key) in list" @click="jumpTo(item)">
                <div class="msg-left">
                  <span class="msg-avatar">
                    <img :src="item.msg_title_img" />
                  </span>
                </div>
                <div class="msg-right">
                  <div class="msg-info-block">
                    <div class="msg-info-left">
                      <div class="info-left-block">
                        <div class="msg-info-head">{{ item.msg_title }}</div>
                        <div class="msg-info-body" v-html="item.msg_content"></div>
                        <div class="msg-info-bottom">{{ item.insert_time }}
                          <!-- <span class="read-status" v-if="item.read_status === 'YD#'">已读</span>
                          <span class="read-status" v-else>未读</span> -->
                        </div>
                      </div>
                    </div>
                    <div class="msg-info-right radius" v-if="item.msg_type_id">
                      <span class="msg-cat-ico">{{ item.msg_count }}111</span>
                    </div>
                    <div class="msg-info-right width-10" v-if="!item.msg_type_id">
                      <span class="msg-cat-ico"></span>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="center-content-block load-more"
            @click="loadMsgs()"
            v-if="hasMoreData !== false && loading !== true">
            <span>点击加载</span>
          </div>
          <div class="no-data-tip" v-if="loading === true" >
            <span>加载数据中...</span>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'
  import crmTabbar from '../components/crm-tabbar'

  export default {
    mounted () {
      this.callJsApi('biz.navigation.setTitle', { title: '智能助手' })
    },
    components: {
      crmTabbar
    },
    methods: {
      loadMsgs () {
        const catId = this.$route.query.cat_id
        let promise
        if (this.loading === true) return

        if (catId) promise = this.getCatMsgList({cat_id: catId, page_index: this.page_index, page_size: this.page_size})
        else promise = this.getMsgList({page_index: this.page_index, page_size: this.page_size})
        this.loading = true
        this.init = false

        promise.then((response) => {
          this.init = true
          if (response.data.errcode === 0) {
            this.page_index++
            const totalPage = Math.ceil(parseInt(response.data.total) / parseInt(this.page_size))
            this.hasMoreData = this.page_index < totalPage
            console.log(this.page_index < totalPage, this.page_index, totalPage)
            this.list = this.list.concat(response.data.results)
            this.total = response.data.total
          } else {
            this.hasMoreData = false
          }
          this.loading = false
        }).catch((e) => {
          this.init = true
          this.hasMoreData = false
          this.loading = false
          console.log(e)
        })
      },
      reset () {
        this.hasMoreData = true
        this.loading = false
        this.list = []
        this.show = false
        this.total = 0
        this.page_index = 1
        this.false = true
        setTimeout(() => {
          this.show = true
        })
      },
      jumpTo (msg) {
        this.changeReadStatus({
          cat_id: msg.id,
          read_status: encodeURIComponent('YD#')
        })
        if (msg.link_type === 'WL#') {
          window.location.href = msg.msg_url
        } else {
          this.reset()
          this.$router.push({name: 'msg-list', query: {cat_id: msg.id }})
        }
      },
      ...mapActions({
        'getMsgList': 'getMsgList',
        'getCatMsgList': 'getCatMsgList',
        'changeReadStatus': 'changeReadStatus'
      })
    },
    activated () {
    },
    computed: {
      ...mapState({
        fullPath: state => state.route.fullPath
      })
    },
    watch: {
      fullPath () {
        this.reset()
      }
    },
    data () {
      return {
        page_index: 1,
        init: false,
        page_size: 30,
        loading: false,
        show: true,
        hasMoreData: true,
        list: [],
        total: 0,
        winHeight: window.innerHeight
      }
    }
  }
</script>
<style lang="less">
  @import "../less/base";
  .msg-list {
    overflow: hidden;

    .grey {
      color: #999999;
    }

    .msg-link-ico {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      top: -2px;
      position: absolute;
      top: 50%;
      margin-top: -4px;
      right: 10px;
    }

    @msg-radius-size: 22px;
    @padding: 5px;

    .msg-cat-ico {
      display: inline-block;
      max-height: @msg-radius-size;
      max-width: @msg-radius-size;
      border-radius: 50%;
      color: #fff;
      // border:1px solid #35adff;
      // border-color: #C8C8CD;
      background-color: red;
      position: absolute;
      top: 50%;
      text-align: center;
      line-height: @msg-radius-size;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: @padding;
      margin-top: -(@msg-radius-size / 2);
      margin-right: -(@msg-radius-size / 2);
      right: 50%;
      // right: 2px;
      font-weight: bolder;
    }


    .msg-item {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #f3f0f0;
      padding: 10px 5px 10px 4px;
      border-radius: 2px;
      cursor: pointer;
    }

    .msg-item:first-child {
      // border-top: 1px solid #f3f0f0;
    }

    .msg-item:last-child {
      border: none;
    }

    .msg-info-body, .msg-info-bottom {
      color: #999999;
    }

    .msg-info-body {
      padding-bottom: 4px;
      font-size: 13px;
    }

    .msg-left {
      display: flex;
      flex: initial;
      padding-right: 10px;
      align-items: center;
    }

    .msg-list-box {
        padding: 0 0 0 20px;
    }

    .msg-info-block {
      display: flex;
    }

    .msg-info-left {
      flex: 1;
    }

    .msg-info-right {
      flex: initial;
      position: relative;

      &.radius {
        width: @msg-radius-size;
      }

      &.width-10 {
        width: 30px;
      }
    }

    .msg-right {
      flex: 1;
    }

    .msg-info-bottom {
      position: relative;
      font-size: 12px;
    }

    .read-status {
      position: absolute;
      right: 0;
      color: #f43530;
    }

    .msg-avatar {
      width: 45px;
      height: 45px;
      display: flex;
      flex: 1;
      border-radius: 50%;
      // overflow: hidden;

      img {
        width: 100%;
        // height: 100%;
      }
    }

    .load-more {
      color: #35adff;
      cursor: pointer;
    }
  }
</style>
